<template>
  <div class="popution">
    <div class="tion_input">
        <div class="input_box">
          <van-icon class="input_icon" name="search"  />
          <input class="input_text" type="text" placeholder="请输入药的名称">
        </div>
    </div>
    <div class="potution_max">
        <div class="text_ul">
          <ul>
            <li>热点</li>
            <li>话题</li>
            <li>生活</li>
            <li>睡眠</li>
            <li>男性</li>
            <li>双性</li>
          </ul>
        </div>
        <div class="swipt_max">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item>1</van-swipe-item>
            <van-swipe-item>2</van-swipe-item>
            <van-swipe-item>3</van-swipe-item>
            <van-swipe-item>4</van-swipe-item>
          </van-swipe>
        </div>
        <div class="knowledge">
            <div class="newmation">
                <dl>
                    <dt><img src="../../assets/img/kepu/kepu01_05.jpg" alt=""></dt>
                    <dd>
                        <span>盛夏海滨游,别把头屑,头痒带回家</span>
                        <p>
                          <span>生活 8月6号</span>
                          <span class="p_span">阅读8379 <b>攒97</b></span>
                        </p>
                    </dd>
                </dl>
                <dl>
                    <dt><img src="../../assets/img/kepu/kepu01_08.jpg" alt=""></dt>
                    <dd>
                        <span>盛夏海滨游,别把头屑,头痒带回家</span>
                        <p>
                          <span>生活 8月6号</span>
                          <span class="p_span">阅读8379 <b>攒97</b></span>
                        </p>
                    </dd>
                </dl>
                <dl>
                    <dt><img src="../../assets/img/kepu/kepu01_10.jpg" alt=""></dt>
                    <dd>
                        <span>盛夏海滨游,别把头屑,头痒带回家</span>
                        <p>
                          <span>生活 8月6号</span>
                          <span class="p_span">阅读8379 <b>攒97</b></span>
                        </p>
                    </dd>
                </dl>
                <dl>
                    <dt><img src="../../assets/img/kepu/kepu01_12.jpg" alt=""></dt>
                    <dd>
                        <span>盛夏海滨游,别把头屑,头痒带回家</span>
                        <p>
                          <span>生活 8月6号</span>
                          <span class="p_span">阅读8379 <b>攒97</b></span>
                        </p>
                    </dd>
                </dl>
                <dl>
                    <dt><img src="../../assets/img/kepu/kepu01_14.jpg" alt=""></dt>
                    <dd>
                        <span>盛夏海滨游,别把头屑,头痒带回家</span>
                        <p>
                          <span>生活 8月6号</span>
                          <span class="p_span">阅读8379 <b>攒97</b></span>
                        </p>
                    </dd>
                </dl>
                <dl>
                    <dt><img src="../../assets/img/kepu/img_03.jpg" alt=""></dt>
                    <dd>
                        <span>盛夏海滨游,别把头屑,头痒带回家</span>
                        <p>
                          <span>生活 8月6号</span>
                          <span class="p_span">阅读8379 <b>攒97</b></span>
                        </p>
                    </dd>
                </dl>
                <dl>
                    <dt><img src="../../assets/img/kepu/img_06.jpg" alt=""></dt>
                    <dd>
                        <span>盛夏海滨游,别把头屑,头痒带回家</span>
                        <p>
                          <span>生活 8月6号</span>
                          <span class="p_span">阅读8379 <b>攒97</b></span>
                        </p>
                    </dd>
                </dl>
                <dl>
                    <dt><img src="../../assets/img/kepu/img_08.jpg" alt=""></dt>
                    <dd>
                        <span>盛夏海滨游,别把头屑,头痒带回家</span>
                        <p>
                          <span>生活 8月6号</span>
                          <span class="p_span">阅读8379 <b>攒97</b></span>
                        </p>
                    </dd>
                </dl>
                <dl>
                    <dt><img src="../../assets/img/kepu/img_10.jpg" alt=""></dt>
                    <dd>
                        <span>盛夏海滨游,别把头屑,头痒带回家</span>
                        <p>
                          <span>生活 8月6号</span>
                          <span class="p_span">阅读8379 <b>攒97</b></span>
                        </p>
                    </dd>
                </dl>
                <dl>
                    <dt><img src="../../assets/img/kepu/img_12.jpg" alt=""></dt>
                    <dd>
                        <span>盛夏海滨游,别把头屑,头痒带回家</span>
                        <p>
                          <span>生活 8月6号</span>
                          <span class="p_span">阅读8379 <b>攒97</b></span>
                        </p>
                    </dd>
                </dl>
                <dl>
                    <dt><img src="../../assets/img/kepu/img_14.jpg" alt=""></dt>
                    <dd>
                        <span>盛夏海滨游,别把头屑,头痒带回家</span>
                        <p>
                          <span>生活 8月6号</span>
                          <span class="p_span">阅读8379 <b>攒97</b></span>
                        </p>
                    </dd>
                </dl>
                <dl>
                    <dt><img src="../../assets/img/kepu/img_16.jpg" alt=""></dt>
                    <dd>
                        <span>盛夏海滨游,别把头屑,头痒带回家</span>
                        <p>
                          <span>生活 8月6号</span>
                          <span class="p_span">阅读8379 <b>攒97</b></span>
                        </p>
                    </dd>
                </dl>
                <dl>
                    <dt><img src="../../assets/img/kepu/img_18.jpg" alt=""></dt>
                    <dd>
                        <span>盛夏海滨游,别把头屑,头痒带回家</span>
                        <p>
                          <span>生活 8月6号</span>
                          <span class="p_span">阅读8379 <b>攒97</b></span>
                        </p>
                    </dd>
                </dl>
            </div>
        </div>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent } from 'vue';
export default defineComponent({
})
</script>

<style lang="scss" scoped>
.popution{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.potution_max{
    flex: 1;
    overflow-x: scroll;
}
.tion_input{
    height: 0.53rem;
    margin-top: 0.28rem;
    .input_box{
      width: 6.9rem;
      height: 0.53rem;
      background-color: #ccc;
      margin-left: 0.28rem;
      border-radius: 0.5rem;
        .input_icon{
      line-height: 0.62rem;
      margin-left: 0.24rem;
        }
        .input_text{
          width: 4rem;
          height: 0.4rem;
          border: none;
          margin-left: 0.14rem;
           background-color: #ccc;
        }
    }
}
.text_ul{
  height: 0.53rem;
  ul{
    display: flex;
    line-height: 0.53rem;
    li{
      margin-left: 0.44rem;
    }
  }
}
.swipt_max{
  height: 3.2rem;
  img{
    width: 100%;
    height: 100%;
  }
}
.knowledge{
  height:auto;
  .newmation{
    dl{
      height: 1.92rem;
      // background-color: #ccc;
      display: flex;
      border-bottom: 1px solid #ccc;
      dt{
        width: 1.64rem;
        height: 1.38rem;
        margin-top: 0.28rem;
        margin-left: 0.28rem;
        img{
          width: 100%;
          height: 100%;
        }
      }
      dd{
         margin-top: 0.32rem;
         margin-left: 0.2rem;
         width: 6rem;
        span{
          color: #000;
          // font-weight: 900;
        }
        p{
          margin-top: 0.55rem;
         span{
            font-size: 0.18rem;
            color: #bbbbbb;
         }
         .p_span{
            float: right;
            margin-right: 0.36rem;
            b{
              margin-right: 0.15rem;
            }
         }
        }
      }
    }
  }
}
// 轮播图
 .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
    .swiper-img{
      width: 100%;
      height: 100%;
    }
  }
</style>
